// 轮播图组件 - 提供图片轮播功能
import 'package:carousel_slider/carousel_slider.dart';
// Flutter基础组件 - 提供Material Design组件
import 'package:flutter/material.dart';

import '../components/carousel_indicator.dart';
import '../components/image_carousel.dart';

/// 首页页面组件
///
/// 这是一个StatefulWidget，因为需要管理轮播图的状态和当前索引
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  /// 轮播图图片URL列表
  ///
  /// 包含三个来自Unsplash的高质量图片URL
  final List<String> _bannerImages = [
    'https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
    'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
    'https://images.unsplash.com/photo-1470115636492-6d2b56f9146d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
  ];

  /// 页面控制器
  ///
  /// 用于管理轮播图的页面切换，初始页面为0
  final PageController _controller = PageController(initialPage: 0);

  /// 当前轮播图索引
  ///
  /// 用于跟踪和指示当前显示的轮播图位置
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            // 使用Stack将指示器覆盖在轮播图上
            Stack(
              alignment: Alignment.bottomCenter,
              children: [
                // 轮播图组件
                ImageCarousel(
                  images: _bannerImages,
                  onPageChanged: (index, reason) {
                    setState(() {
                      _currentIndex = index;
                    });
                  },
                  currentIndex: _currentIndex,
                ),
                // 指示器组件，添加底部边距使其位于图片上方
                CarouselIndicator(
                  count: _bannerImages.length,
                  currentIndex: _currentIndex,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
